import React, { Component } from 'react';
import {
  View, Text, Button,
} from 'react-native';

class MyComponent extends Component {
    // static defaultProps = {
    //     name: 'Mary',
    // };
    
    //为了性能考虑，只在开发环境验证 propTypes
    static propTypes = {
        name:PropTypes.string.isRequired,
    };
  // 初始化 State
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello!',
    };
    // 不会自动绑定 this
    // 需要显式地调用 .bind(this)：
  }

    // 警告：这种语法还处于试验性阶段！
    // 在这里使用箭头函数就可以把方法绑定给实例：
    handleClick = () => {
      this.setState({ message: 'Hello333' });
      console.log('handleClick this:', this);
    }

    handleClick2() {
      this.setState({ message: 'Hello2222' });
      console.log('handleClick this:', this);
    }

    render() {
      return (
        <View>
          <Text>ReactComponent 2</Text>
          <Text>{this.props.name}</Text>
          <Button
            title={`Say ${this.state.message}`}
            onPress={this.handleClick}
          />
        </View>
      );
    }
}

// 默认值
MyComponent.defaultProps = {
  name: 'Mary',
};

export default MyComponent;
